<template>
  <div id="information">
    
      <div class="ground-box">
        <img class="ground-box-img" src="../../../assets/img/background.jpg" />
      </div>
      
      <div class="middle">
        <div class="user-img-box">
          <img class="user-img" src="../../../assets/img/1-1.jpeg" />
        </div>
        <div :class="changeStyle" @click="changeClick" v-if="user">
          <span class="iconfont" v-show="show">&#xe602;</span>
           {{changeContent}}
        </div>
        <div class="change" v-else>编辑信息</div>
        <div class="friends iconfont"> &#xe602; 好友</div>
      </div>
      
      <div class="name-box">
        
        <div class="name">张三</div>
        <div class="douyinId">抖音号：123456789</div>
      </div>
      
      <div class="text-box">
        <div class="introduce">
          张三热爱学习
        </div>
        <div class="label-box">
          <div class="label">北京</div>
          <div class="label">男</div>
          <div class="label">22</div>
        </div>
      </div>
      
      
      
      <div class="number-box">
          <div class="box">
          <span class="number">123</span>
          获赞
          </div>
          
          <div class="box">
            <span class="number">456</span>
            关注
          </div>
       
        <div class="box">
          <span class="number">4568</span>
          粉丝
        </div>
      </div>
      
      <div class="router-box" v-if="user">
        <router-link :to="{path:'/user',query:{listName:'works'}}">
          <div class="love" >作品</div>
        </router-link>
        
        <router-link :to="{path:'/followListUser',query:{listName:'follow'}}">
          <div class="love">动态</div>
        </router-link>
        
        <router-link :to="{path:'/likeListUser',query:{listName:'like'}}">
          <div class="love">喜欢</div>
        </router-link>
        
      </div>
      <div class="router-box"  v-else>
              <router-link :to="{path:'personal',query:{listName:'works'}}">
                <div class="love" >作品</div>
              </router-link>
              
              <router-link :to="{path:'/followList',query:{listName:'follow'}}">
                <div class="love">动态</div>
              </router-link>
              
              <router-link :to="{path:'/likeList',query:{listName:'like'}}">
                <div class="love">喜欢</div>
              </router-link>
              
            </div>
      
  </div>
</template>

<script>

export default {
  name: 'information',
  props:['user'],
  data(){
    return{
        changeStyle:' changeUser',
        changeContent : '关注',
        show:true
    }
  },
  methods:{
    changeClick(){
      this.changeStyle =this.changeStyle ===' changeUser'?' change':' changeUser'
      this.changeContent = this.changeContent === '关注'?'取消关注':'关注'
      this.show = this.show === true? false:true
    }
  }

}
</script>

<style  scoped>

#information{
  width: 100%;
  overflow: hidden;
  background-color: #000000;
}
#information .ground-box{
  width: 100%;
  margin: .1rem 0;
  padding: 0 .01rem;
}
#information .ground-box .ground-box-img{
  width: 100%;
  height: 2.5rem;
}
#information .middle{
  width: 100%;
  position: relative;
  height: 2.5rem;
}
#information .middle .user-img-box{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-top: -.5rem;
  margin-left: .6rem;
}
#information .middle .user-img-box .user-img{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: .1rem solid #000000;
}
#information .middle .change{
  position: absolute;
  width: 42%;
  top: 1rem;
  right: 1.5rem;
  height: .6rem;
  line-height: .6rem;
  text-align: center;
  background-color: #3b3b3b;
  color: #b8b8b8;
  font-size: .25rem;
  border-radius: .04rem;
}
#information .middle .changeUser{
  position: absolute;
  width: 42%;
  top: 1rem;
  right: 1.5rem;
  height: .6rem;
  line-height: .6rem;
  text-align: center;
  background-color: #f92f0b;
  color: #b8b8b8;
  font-size: .25rem;
  border-radius: .04rem;
}
#information .middle .friends{
  position: absolute;
  width: 1.2rem;
  top: 1rem;
  right: .25rem;
  height: .6rem;
  line-height: .6rem;
  text-align: center;
  background-color: #3b3b3b;
  color: #b8b8b8;
  font-size: .25rem;
  border-radius: .04rem;
}
#information .name-box{
  padding: 0 .5rem;
}
#information .name-box .name{
  height: 1rem;
  line-height: 1rem;
  font-size: .5rem;
}
#information .name-box .douyinId{
  height: 1rem;
  line-height: 1rem;
  font-size: .25rem;
}
#information .text-box{
  margin-top: .1rem;
  padding: 0 .5rem;
  border-top: .01rem solid #222;
}
#information .text-box .introduce{
  height: .5rem;
  line-height: .5rem;
  font-size: .3rem;
}
#information .text-box .label-box{
  width: 100%;
  height: .5rem;
  line-height: .5rem;
  overflow: hidden;
}
#information .text-box .label-box .label{
  height: .4rem;
  line-height: .4rem;
  font-size: .25rem;
  text-align: center;
  background-color: #333;
  color: #999;
  float: left;
  padding: 0 .2rem;
  border-radius: .05rem;
  margin-right: .1rem;
  margin-top: .1rem;
}
#information .number-box{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  padding: 0 .5rem;
  overflow: hidden;
}
#information .number-box .box{
  width: 1.5rem;
  height: .8rem;
  line-height: .8rem;
  float: left;
  color: #3f3f3f;
}
#information .number-box .box .number{
  color: #ebebeb;
}

#information .router-box{
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  border-bottom: .01rem solid #222222;
}
#information .router-box .love{
  width: 33%;
  height: .8rem;
  line-height: .8rem;
  color: #999;
  float: left;
  text-align: center;
}
</style>
